<template>
    <view>
        <view class="dis_f_sb_c">
        <u-notice-bar :text="notice"></u-notice-bar>
        <view>
            <u-button size="small" type="warning" icon="server-man" @click="showKfWx=true">咨询客服</u-button>
        </view>
        </view>
        <view class="p_20">
<!--            <view class="dis_f_l_c">-->
<!--            -->
<!--            </view>-->
            <view class="content_box">
                <view class="m_t_10">
                    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                    <u--form
                        labelPosition="left"
                        :model="query"
                        :rules="rules"
                        ref="uForm"
                        labelWidth="100"
                    >
                        <u-form-item
                            label="姓名"
                            prop="name"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.name"
                                border="none"
                                placeholder="请输入姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="小名"
                            prop="petName"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.petName"
                                border="none"
                                placeholder="请输入小名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="性别"
                            prop="sex"
                            borderBottom
                            @click="showSex = true"
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.sex"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择性别"
                                border="none"
                            ></u--input>
                            <u-icon
                                slot="right"
                                name="arrow-right"
                            ></u-icon>
                        </u-form-item>
                        <u-form-item
                            label="出生日期"
                            prop="birthDate"
                            borderBottom
                            @click="showTime = true"
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.birthDate"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择出生日期"
                                border="none"
                            ></u--input>
                            <u-icon
                                slot="right"
                                name="arrow-right"
                            ></u-icon>
                        </u-form-item>
                        <u-form-item
                            label="年龄"
                            prop="age"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.age"
                                border="none"
                                placeholder="请输入年龄"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="地区"
                            prop="area"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.area"
                                border="none"
                                placeholder="请输入地区"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="街道"
                            prop="street"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.street"
                                border="none"
                                placeholder="请输入街道"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="社区"
                            prop="community"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.community"
                                border="none"
                                placeholder="请输入社区"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="民族"
                            prop="nationality"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.nationality"
                                border="none"
                                placeholder="请输入民族"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="身份证号"
                            prop="idCard"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.idCard"
                                border="none"
                                placeholder="请输入身份证号"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="身高"
                            prop="height"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.height"
                                border="none"
                                placeholder="请输入身高"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="体重"
                            prop="weight"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.weight"
                                border="none"
                                placeholder="请输入体重"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="有无疾病"
                            prop="isIll"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isIll">
                                <u-radio name="有" label="有"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="无" label="无"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            v-if="isIll=='有'"
                            label="疾病"
                            prop="ill"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.ill"
                                border="none"
                                placeholder="请输入疾病"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="监护人姓名"
                            prop="guardianName"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.guardianName"
                                border="none"
                                placeholder="请输入监护人姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="guardianTel"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.guardianTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="与孩子关系"
                            prop="relation"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.relation"
                                border="none"
                                placeholder="请输入与孩子关系"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="邻居姓名"
                            prop="neighborName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.neighborName"
                                border="none"
                                placeholder="请输入邻居姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="neighborTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.neighborTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="村(居)委书记姓名"
                            prop="villageName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.villageName"
                                border="none"
                                placeholder="请输入村(居)委书记姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="villageTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.villageTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="家庭主要联系人姓名"
                            prop="primaryName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.primaryName"
                                border="none"
                                placeholder="请输入家庭主要联系人姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="primaryTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.primaryTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="学校"
                            prop="school"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.school"
                                border="none"
                                placeholder="请输入学校"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="班主任姓名"
                            prop="teacherName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.teacherName"
                                border="none"
                                placeholder="请输入班主任姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="teacherTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.teacherTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="家庭情况"
                            prop="familyInfo"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--textarea
                                v-model="query.familyInfo"
                                border="none"
                                placeholder="请输入家庭情况"
                                autoHeight
                            ></u--textarea>
                        </u-form-item>
                        <u-form-item
                            label="家庭是否有低保"
                            prop="isSubsistenceAllowance"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isSubsistenceAllowance">
                                <u-radio name="有" label="有"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="无" label="无"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            label="家庭是否是精准扶贫户"
                            prop="isPreciseHelp"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isPreciseHelp">
                                <u-radio name="是" label="是"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="否" label="否"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            label="微心愿"
                            prop="wish"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--textarea
                                v-model="query.wish"
                                border="none"
                                placeholder="请输入微心愿"
                                autoHeight
                            ></u--textarea >
                        </u-form-item>
                        <u-form-item
                            label="孩子现状"
                            prop="helpType"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <uni-data-picker v-model="query.helpType"  :localdata="helpTypeList" placeholder="请选择孩子现状" popup-title="请选择孩子现状" @change="onTypeChange" ></uni-data-picker>
                        </u-form-item>
                        <u-form-item
                            label="帮扶需求"
                            prop="helpNeeds"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <uni-data-picker v-model="query.helpNeeds"  :localdata="helpNeedsList" placeholder="请选择帮扶需求" popup-title="请选择帮扶需求" @change="onTypeHelpNeedsChange" ></uni-data-picker>
                        </u-form-item>
                    </u--form>
                    <view class="dis_f_c_c m_t_20 m_b_20">
                        <view class="release dis_f_c_c" @click="handleSend">发布</view>
                    </view>
                </view>
            </view>
        </view>
        <u-action-sheet
            :show="showSex"
            :actions="actions"
            title="请选择性别"
            @close="showSex = false"
            @select="sexSelect"
        >
        </u-action-sheet>
        <u-datetime-picker
            :show="showTime"
            v-model="value1"
            mode="datetime"
            :formatter="formatter"
            @confirm="handleTimeConfirm"
        ></u-datetime-picker>

        <!--    客服    -->
        <u-popup :show="showKfWx" @close="showKfWx=false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view style="padding: 30rpx;">
                <u-image width="300rpx" height="300rpx" :src="kfWx"></u-image>
                <view class="dis_f_c_c f_s_16 m_t_10 c_9">长按保存二维码</view>
            </view>
        </u-popup>

        <u-modal :show="showTips" title="提示" confirmText="开通会员" cancelText="支付" :showCancelButton="true" @confirm="handleConfirm" @cancel="handleCancel">
            <view>单条发布需支付{{money}}元</view>
        </u-modal>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>
<script>

import {baseUrl} from "@/sheep/request/baseUrl";
import {getByKeyApi, addInformationApi, getAddressApi, getAreaListApi, topUpApi,getMyInfoApi } from "@/sheep/api";
export default {
    name: "index",
    data() {
        return {
            notice:'',
            showKfWx:false,
            kfWx:'',
            checkboxValue: [],
            showSex: false,
            actions: [{
                name: '男',
            },
                {
                    name: '女',
                }],
            showTime:false,
            value1: Number(new Date()),
            columnsPicker:[],
            keyName:'',
            fileListImg: [],
            unitList: [
                [{
                    label:'吨',
                    value:'吨'
                },       {
                    label:'方',
                    value:'方'
                }]
            ],
            fileList1: [],
            fileList2: [],
            className: null,
            isRecharge: false,
            payNum: null,
            formData: {
                user: 'test'
            },
            areaList:[],
            query: {
                name:'',
                petName:'',
                sex:'',
                birthDate:'',
                age:'',
                area:'',
                street:'',
                community:'',
                nationality:'',
                idCard:'',
                height:'',
                weight:'',
                isIll:'',
                ill:'',
                guardianName:'',
                guardianTel:'',
                relation:'',
                neighborName:'',
                neighborTel:'',
                villageName:'',
                villageTel:'',
                primaryName:'',
                primaryTel:'',
                school:'',
                teacherName:'',
                teacherTel:'',
                familyInfo:'',
                isSubsistenceAllowance:'',
                isPreciseHelp:'',
                wish:'',
                helpType:'',
                helpNeeds:'',
            },
            rules: {
                'name': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'petName': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'sex': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'birthDate': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'age': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'area': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'street': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'community': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'familyInfo': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'wish': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'helpNeeds': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'helpType': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
            },
            helpTypeList:[],
            helpNeedsList:[],
            pickerTypeList:[],
            isShow: false,
            type:'',
            queryData:'',
            listId:'',
            queryName:'',
            vipRules:'',
            topUpForm: {
                payWay: "WX_XCX_PAY",
                amount: "",
                attach: "",
                orderType: "purchase",
                desc: "单条信息发布",
            },
            money:'',
            showTips:false,
        }
    },
    onLoad(params) {
        this.type=params.type
        this.query.type=params.type
        //设置顶部标题
        uni.setNavigationBarTitle({
            title: this.type==1?'申请成为孤儿':'人找车'
        })
    },
    onShow() {
        this.geHelpType()
        this.getNoticeList()
        this.getHelpNeeds()
        this.getwx()
    },
    methods: {
        async getNoticeList() {
            let res = await getByKeyApi("applyOrphanTips");
            res.data.forEach((element) => {
                this.notice += element.configValue + "                     ";
            });
        },
        async getwx() {
            let res = await getByKeyApi("kf_wx");
            this.kfWx = res.data[0].url;
        },
        async getMoney() {
            let res = await getByKeyApi("money");
            this.money = res.data[0]?.configValue;
            this.topUpForm.amount = this.money
        },
        async geHelpType() {
            let res = await getByKeyApi("helpType");
            this.helpTypeList = res.data.map(item=>{
                return {
                    text: item.configName,
                    value: item.configName
                }
            })
        },
        async getHelpNeeds() {
            let res = await getByKeyApi("helpNeeds");
            this.helpNeedsList = res.data.map(item=>{
                return {
                    text: item.configName,
                    value: item.configName
                }
            })
        },
        onTypeChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.query.helpType = value[0].text
            }else{
                this.query.helpType = ''
            }

        },
        onTypeHelpNeedsChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.query.helpNeeds = value[0].text
            }else{
                this.query.helpNeeds = ''
            }

        },
        handleToProtocol(e){
            uni.navigateTo({
                url: '/pages/agreement/index?type='+e
            })
        },
        sexSelect(e) {
            this.query.sex = e.name
            this.$refs.uForm.validateField('query.sex')
        },
        handleTimeConfirm(e){
            this.query.birthDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
            this.$refs.uForm.validateField('query.birthDate')
            this.showTime = false
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            if (type === 'hour') {
                return `${value}时`
            }
            if (type === 'minute') {
                return `${value}分`
            }
            return value
        },
        onchange(e,type) {
            const value = e.detail.value
            if (value.length>0){
                if (type==1){
                    this.query.province= value[0].text
                    this.query.city= value[1].text
                    this.query.districts= value[2].text
                    this.query.area= value[2].text
                }
                if (type==2){
                    this.query.destinationProvince= value[0].text
                    this.query.destinationCity= value[1].text
                    this.query.destinationDistricts= value[2].text
                    this.query.destinationArea= value[2].text
                }
            }else{
                if (type==1){
                    this.query.province = ''
                    this.query.city = ''
                    this.query.districts = ''
                    this.query.area = ''
                }
                if (type==2){
                    this.query.destinationProvince = ''
                    this.query.destinationCity = ''
                    this.query.destinationDistricts = ''
                    this.query.destinationArea = ''
                }

            }
        },
        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = this.filterAreaName(res.data)
            })
        },
        filterAreaName(data){
            // if(!(data?.length <= 0)){
            // 等价于
            if(!data || data.length <= 0){ // 递归的出口
                return null;
            }
            return data.map(x => { // 循环数据
                const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
                    children: x.children,
                    text: x.name,
                    value: x.areaCode,
                };
                const children = this.filterAreaName(x.children); // 子级数据

                if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
                    model.children = children;
                }
                return model; // 返回这个数据
            })
        },

        //开通会员
        handleConfirm(){
            this.showTips=false
            uni.navigateTo({
                url: "/pages/mine/vipList",
            });
        },
        //单条支付
        handleCancel() {
            this.handleToVip()
        },

        handleSend() {
            this.$refs.uForm.validate().then(res=>{
                if (this.checkboxValue.length==0){
                    uni.showToast({
                        title: '请勾选免责声明',
                        icon: 'none'
                    })
                    return
                }
                uni.showLoading({});
                addInformationApi(this.query).then(res => {
                    uni.hideLoading()
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                    if (res.code == 200){
                        //关闭当前页面 跳到我的发布页面
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/mine/mySend',
                            })
                        }, 1000);
                    }
                })

            })
        },
        handleToVip(){
            topUpApi(this.topUpForm).then(
                ({ data }) => {
                    let that = this;
                    uni.requestPayment({
                        provider: "wxpay",
                        timeStamp: data.timeStamp,
                        nonceStr: data.nonceStr,
                        package: data.packageValue,
                        signType: data.signType,
                        paySign: data.paySign,
                        success: function(res) {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'none',
                                duration: 2000
                            })
                            that.send()
                        },
                        fail: function(err) {},
                    });
                });
        },
    }
}
</script>

<style scoped lang="scss">
.release {
    width: 600rpx;
    height: 70rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    background-color: #FCE4E0;
    color: #000;
}

// 支付弹层
.pay {
    padding: 30rpx;

    .pay-title {
        font-size: 35rpx;
    }

    .pay-select {
        margin: 50rpx;
    }

    .pay-flex {
        display: flex;
        margin-top: 30rpx;

        /deep/ .u-button {
            height: 84rpx !important;
            font-size: 30rpx;

            &:first-child {
                margin-right: 25rpx !important;
            }
        }
    }

    .surplus {
        margin-top: 35rpx;
        font-size: 25rpx;

        .surplus-num {
            margin-left: 15rpx;
        }
    }
}
</style>
